<template>
    <div class="">
        <!-- mp4 ✔ -->
        <video controls width="250">
            <source :src="mp4Url" type="video/mp4" />
        </video>
        <!-- m3u8 ❌ -->
        <!-- <video :src="m3u8Url"></video> -->


        <!-- mp4 ❌ 浏览器会直接下载视频 -->
        <!-- <iframe :src="m3u8Url" frameborder="0"></iframe> -->
        <!-- flv ✔ -->
        <!-- <iframe :src="flvUrl"></iframe> -->

        <!-- -*------------------------------------------ -->
        <!-- <video id="videoss" ref="myVideo">
            <source :src="m3u8Url" />
        </video> -->
        <!-- <video id="my-player" class="video-js" controls preload="auto" data-setup='{}'>
            <source :src="m3u8Url">
            </source>
        </video> -->
        <!-- <video id="videoElement" class="centeredVideo" autoplay controls width="1024" height="576"></video> -->

        <!-- 使用hls.js，不需要任何定制的播放器，只需要<video>元素就能播放m3u8 -->
        <!-- <video ref="videoRef" width="400" controls></video> -->
    </div>
</template>

<script>
import videojs from "video.js";
import flvjs from 'flv.js'
import Hls from 'hls.js';

export default {
    components: {},
    data() {
        return {
            flvPlayer: null,
            mp4Url: "https://assets.mixkit.co/videos/2213/2213-720.mp4",
            m3u8Url: "https://www.tax.huanchenxinnengyuan.com/rtp/34020000001320000002_34020000001320000002/hls.m3u8",
            flvUrl: "https://www.video.huanchenxinnengyuan.com/#/play/wasm/wss%3A%2F%2Fwww.video.huanchenxinnengyuan.com%3A443%2Frtp%2F34020000001320000003_34020000001320000003.live.flv"
        };
    },
    mounted() {
        var hls = new Hls();
        hls.loadSource(this.m3u8Url);
        hls.attachMedia(this.$refs.videoRef);
        hls.on(Hls.Events.MANIFEST_PARSED, function () {
            this.$refs.videoRef.play();
        });
    },
    methods: {

    },
}
</script>
<style scoped></style>